<template>
  <div>
    <div class="topBox">
      <div class="titleBox">
        <span class="title-r">应交前续收</span>
      </div>
      <div>
        <div class="top top-self">
          <div
            v-for="(value, key, index) in cardmap"
            :key="key"
            class="col-202"
          >
            <div class="info">{{ key }}</div>
            <div class="infoNum">
              {{ value }}<span style="margin-left: 5px">件</span>
            </div>
          </div>
        </div>
      </div>
      <div style="margin-top: 20px; margin-bottom: 20px">
        <el-form
          :model="superviseForm"
          ref="superviseForm"
          class="form-row0"
          :rules="rules"
          style="display: block"
        >
          <Row type="flex" justify="space-between">
            <Col span="6">
              <el-form-item>
                <el-input
                  placeholder="请录入代理人姓名/工号"
                 v-model="superviseForm.appntName"
                >
                  <i slot="suffix" class="el-input__icon el-icon-search"></i>
                </el-input>
              </el-form-item>
            </Col>
            <Col span="8">
              <el-form-item label="进度：">
                <div style="display: flex">
                  <el-slider
                    v-model="value9"
                    range
                    :max="100"
                    style="width: 40%; margin-right: 10px"
                    @change="wan" 
                  >
                  </el-slider>
                  <el-col :span="6">
                    <el-input
                      v-model="superviseForm.taskRateStart"
                      value="number"
                      style="width: 100%"
                    >
                      <template slot="append">%</template>
                    </el-input>
                  </el-col>
                  <el-col class="line" :span="2" style="text-align: center"
                    >-</el-col
                  >
                  <el-col :span="6">
                    <el-input
                      v-model="superviseForm.taskRateEnd"
                      value="number"
                      style="width: 100%"
                    >
                      <template slot="append">%</template>
                    </el-input>
                  </el-col>
                </div>
              </el-form-item>
            </Col>
            <Col v-if="!showMore" span="7" class="btn-more-box">
              <div @click="showMore = !showMore" class="btn-more"><i class="el-icon-share" style="margin-right:10px"></i>更多筛选</div>
              <Button
                type="primary"
                @click="handleSubmit()"
                style="margin-right: -120px"
                >查询</Button
              >
              <Button @click="handleReset()">重置</Button>
            </Col>
            <i-col v-if="showMore" span="5">
              <el-form-item>
                <Cascader change-on-select :data="organizationList" v-model="superviseForm.organization" placeholder="业务员机构"
                clearable></Cascader>
              </el-form-item>
            </i-col>
            <i-col v-if="showMore" span="5">
              <el-form-item>
                <Select v-model="superviseForm.saleChannel" placeholder="销售渠道" @on-change="changeSaleChannel" clearable>
                <Option v-for="item in saleChannelList" :key="item.key" :value="item.key">{{ item.value }}</Option>
              </Select>
              </el-form-item>
            </i-col>
          </Row>
          
          <Row v-if="showMore" type="flex" justify="space-between">
          <i-col span="4">
            <Row>
              <i-col span="11">
                <el-form-item>
                  <Input placeholder="本年交次" v-model="superviseForm.payCount" />
                </el-form-item>
              </i-col>
              <i-col span="2" style="text-align:center;line-height:45px">-</i-col>
              <i-col span="11">
                <el-form-item>
                  <Select v-model="superviseForm.pay" clearable>
                    <Option v-for="item in payWayList" :key="item.key" :value="item.key">{{ item.value }}</Option>
                  </Select>
                </el-form-item>
              </i-col>
            </Row>
          </i-col>
          <i-col span="4">
            <el-form-item>
              <CheckboxGroup v-model="superviseForm.aaa" class="checkbox-group-0">
                <Checkbox label="1">月交</Checkbox>
                <Checkbox label="2">季交</Checkbox>
                <Checkbox label="3">半年交</Checkbox>
                <Checkbox label="4">年交</Checkbox>
              </CheckboxGroup>
            </el-form-item>
          </i-col>
          <i-col span="4">
            <el-form-item>
              <DatePicker v-model="superviseForm.PayableRange" type="daterange" placeholder="应交日范围" :editable="false"
                style="width:100%" @on-change="changePayableRange"></DatePicker>
            </el-form-item>
          </i-col>
          <i-col span="4">
            <Row>
              <i-col span="11">
                <el-form-item prop="minFee">
                  <Input placeholder="最低保费" v-model="superviseForm.minFee" type="number"
                    @on-blur="decimalConversion(superviseForm.minFee)" />
                </el-form-item>
              </i-col>
              <i-col span="2" style="text-align:center;line-height:45px">-</i-col>
              <i-col span="11">
                <el-form-item prop="maxFee">
                  <Input placeholder="最高保费" v-model="superviseForm.maxFee" type="number"
                    @on-blur="decimalConversion2(superviseForm.maxFee)" />
                </el-form-item>
              </i-col>
            </Row>
          </i-col>
          <i-col span="4">
            <el-form-item>
              <Select v-model="superviseForm.workStatus" placeholder="任务状态" clearable>
                <Option v-for="item in workStatusList" :key="item.key" :value="item.key">{{ item.value }}</Option>
              </Select>
            </el-form-item>
          </i-col>
        </Row>
        <Row v-if="showMore" type="flex" justify="space-between">
          <i-col span="4">
            <el-form-item>
              <Select v-model="superviseForm.payDifficult" placeholder="交费难度" clearable>
                <Option v-for="item in 11" :key="item" :value="item">{{ item - 1 }}级</Option>
              </Select>
            </el-form-item>
          </i-col>
          <i-col span="4">
            <el-form-item>
              <DatePicker v-model="superviseForm.workPlanRange" type="daterange" placeholder="计划服务日期范围"
                :editable="false" style="width:100%" @on-change="changeWorkPlanRange"></DatePicker>
            </el-form-item>
          </i-col>
          <i-col span="4">
            <el-form-item>
              <DatePicker v-model="superviseForm.actualServiceDateRange" type="daterange" placeholder="实际服务日期范围"
                :editable="false" style="width:100%"></DatePicker>
            </el-form-item>
          </i-col>
          <i-col span="4">
            <el-form-item>
              <Select v-model="superviseForm.plannedServiceMethodList" placeholder="计划服务方式" clearable>
                <Option v-for="item in serviceMethodList" :key="item.key" :value="item.key">{{ item.value }}</Option>
              </Select>
            </el-form-item>
          </i-col>
          <i-col span="4">
            <el-form-item>
              <Select v-model="superviseForm.actualServiceMethod" placeholder="实际服务方式" clearable>
                <Option v-for="item in serviceMethodList" :key="item.key" :value="item.key">{{ item.value }}</Option>
              </Select>
            </el-form-item>
          </i-col>
        </Row>
        <Row v-if="showMore" type="flex" justify="space-between">
          <i-col span="4">
            <el-form-item>
              <Select v-model="superviseForm.taskLabel" placeholder="任务标签" clearable>
                <Option v-for="item in taskLabelList" :key="item.key" :value="item.key">{{ item.value }}</Option>
              </Select>
            </el-form-item>
          </i-col>
          <i-col span="4">
            <el-form-item>
              <DatePicker v-model="superviseForm.workEndRange" type="daterange" placeholder="客户生日日期范围" :editable="false"
                style="width:100%" @on-change="changeWorkEndRange"></DatePicker>
            </el-form-item>
          </i-col>
          <i-col span="4">
            <el-form-item>
              <Select v-model="superviseForm.serviceEffectiveness" placeholder="服务效果" clearable>
                <Option v-for="item in workStatusList" :key="item.key" :value="item.key">{{ item.value }}</Option>
              </Select>
            </el-form-item>
          </i-col>
          <Col span="4">
          <el-form-item>
            <Input placeholder="产品名称" v-model="superviseForm.productName" />
          </el-form-item>
          </Col>
          <Col v-if="showMore" span="4" class="btn-more-box">
          </Col>
        </Row>

          <Row v-if="showMore" type="flex" justify="space-between">
            <Col span="4"> </Col>
            <Col v-if="showMore" span="4" class="btn-more-box">
              <div @click="showMore = !showMore" class="btn-more"><i class="el-icon-share" style="margin-right:10px"></i>收起</div>
              <Button type="primary" @click="handleSubmit()">查询</Button>
              <Button @click="handleReset()">重置</Button>
            </Col>
          </Row>
        </el-form>
      </div>
    </div>
    <div>
      <div class="contentScreenBox">
        <div>
          为您找到以下 <span style="color: #3d7cff"> {{ total }} </span> 条结果
        </div>
       
         <!-- |
        筛选条件：
        <div class="searchTag">
          生成日期 7 月 1 日～7 月 30 日 <i class="el-icon-error"></i> -->
        <!-- </div> -->
        <div class="btn-more-box" style="height:35px">
          <div class="btn-more" style="margin-right:10px;" @click="wwww">
          自定义查询列表
          </div>
          <div class="liebiao" v-if="isShow">
            <div v-for="item in superviseColumns"  :key="item.key">
              <el-checkbox  v-model="checkedCities" :label="item.title" :key="item.key" >{{item.title}}</el-checkbox>
            </div>

          </div>
        </div>
      </div>
    </div>

    <Card>
      <div class="table-btn-box">
        <div class="right-btns">
          <Button
            @click="clickButton(0)"
            type="text"
            :style="[flagIndex == 0 && { color: 'rgb(66, 101, 237)' }]"
            >全部</Button
          >
          <Button
            @click="clickButton(1)"
            type="text"
            :style="[flagIndex == 1 && { color: 'rgb(66, 101, 237)' }]"
            >今日计划</Button
          >
          <Button
            @click="clickButton(2)"
            type="text"
            :style="[flagIndex == 2 && { color: 'rgb(66, 101, 237)' }]"
            >面访计划</Button
          >
          <Button
            @click="clickButton(3)"
            type="text"
            :style="[flagIndex == 3 && { color: 'rgb(66, 101, 237)' }]"
            >大额单</Button
          >
          <Button
            @click="clickButton(4)"
            type="text"
            :style="[flagIndex == 4 && { color: 'rgb(66, 101, 237)' }]"
            >困难件</Button
          >
          <Button
            @click="clickButton(5)"
            type="text"
            :style="[flagIndex == 5 && { color: 'rgb(66, 101, 237)' }]"
            >本月生日客户</Button
          >
          <Button
            @click="clickButton(6)"
            type="text"
            :style="[flagIndex == 6 && { color: 'rgb(66, 101, 237)' }]"
            >主动服务</Button
          >
          <Button
            @click="clickButton(7)"
            type="text"
            :style="[flagIndex == 7 && { color: 'rgb(66, 101, 237)' }]"
            >未服务</Button
          >
          <Button
            @click="clickButton(8)"
            type="text"
            :style="[flagIndex == 8 && { color: 'rgb(66, 101, 237)' }]"
            >投诉客户</Button
          >
        </div>
      </div>
      <Table
        :columns="superviseColumns"
        :data="superviseData"
        @on-selection-change="selectionChange"
        @on-sort-change="sortChange"
        class="table-content-0"
      >
        <!-- 任务标签  -->
        <template slot-scope="{ row }" slot="taskLabe">
          <div class="task-labe0">
            <!-- tousushi -->
            <Button
              v-for="item in row.labellist"
              :key="item"
              size="small"
              :class="item"
              >{{ item }}</Button
            >
          </div>
        </template>
        <!-- 服务进度 -->
        <template slot-scope="{ row }" slot="connected">
          <div style="display: flex; align-items: center; width: 100%">
            <el-tooltip
              placement="bottom"
              effect="light"
              style="border: none !important"
            >
              <div slot="content">
                <p class="contentP" style="color: #9aa5b8">
                  当前进度：{{ row.progressA && row.progressA.progress }}
                </p>
                <p class="contentP">
                  计划服务日期：{{
                    row.progressA && row.progressA.planservicedate
                  }}
                </p>
                <p class="contentP">
                  计划服务方式：{{
                    row.progressA && row.progressA.planservicemode
                  }}
                </p>
                <p class="contentP">
                  最近一次服务日期：{{
                    row.progressA && row.progressA.newservicedate
                  }}
                </p>
                <p class="contentP">
                  最近一次服务方式：{{
                    row.progressA && row.progressA.newservicemode
                  }}
                </p>
                <p class="contentP">
                  回访结果：{{ row.progressA && row.progressA.intention }}
                </p>
              </div>
              <el-progress
                :percentage="(row.progressA && row.progressA.progress) || 0"
                :format="format"
                style="width: 33%"
                status="success"
              ></el-progress>
            </el-tooltip>
            <el-tooltip placement="bottom" effect="light">
              <div slot="content">
                <p class="contentP" style="color: #9aa5b8">
                  当前进度：{{ row.progressB && row.progressB.progress }}
                </p>
                <p class="contentP">
                  计划服务日期：{{
                    row.progressB && row.progressB.planservicedate
                  }}
                </p>
                <p class="contentP">
                  计划服务方式：{{
                    row.progressB && row.progressB.planservicemode
                  }}
                </p>
                <p class="contentP">
                  最近一次服务日期：{{
                    row.progressB && row.progressB.newservicedate
                  }}
                </p>
                <p class="contentP">
                  最近一次服务方式：{{
                    row.progressB && row.progressB.newservicemode
                  }}
                </p>
                <p class="contentP">
                  回访结果：{{ row.progressB && row.progressB.intention }}
                </p>
              </div>
              <el-progress
                :percentage="(row.progressB && row.progressB.progress) || 0"
                :format="format"
                style="width: 33%"
              ></el-progress>
            </el-tooltip>
            <el-tooltip placement="bottom" effect="light">
              <div slot="content">
                <p class="contentP" style="color: #9aa5b8">
                  当前进度：{{ row.progressC && row.progressC.progress }}
                </p>
                <p class="contentP">
                  计划服务日期：{{
                    row.progressC && row.progressC.planservicedate
                  }}
                </p>
                <p class="contentP">
                  计划服务方式：{{
                    row.progressC && row.progressC.planservicemode
                  }}
                </p>
                <p class="contentP">
                  最近一次服务日期：{{
                    row.progressC && row.progressC.newservicedate
                  }}
                </p>
                <p class="contentP">
                  最近一次服务方式：{{
                    row.progressC && row.progressC.newservicemode
                  }}
                </p>
                <p class="contentP">
                  回访结果：{{ row.progressC && row.progressC.intention }}
                </p>
              </div>
              <div class="progressBox" style="width: 33%">
                <el-progress
                  :percentage="(row.progressC && row.progressC.progress) || 0"
                  :format="format"
                  style="width: 100%"
                ></el-progress>
              </div>
            </el-tooltip>
          </div>
        </template>
        <template slot-scope="{ row }" slot="planstatename">
          <span v-if="row.planstatename == '未服务'">
            <Button
              class="task-tatus-0"
              style="
                background-color: rgb(255, 235, 235);
                color: rgb(197, 17, 17);
              "
              size="small"
             
              >{{ row.planstatename }}</Button
            >
            <!-- @click="forward(row)" -->
          </span>
          <span v-if="row.planstatename == '服务中'">
            <Button
              class="task-tatus-0"
              style="background-color: #ecf8ff; color: #47c2ff"
              size="small"
              >{{ row.planstatename }}</Button
            >
          </span>
          <span v-if="row.planstatename == '已完成'">
            <Button
              class="task-tatus-0"
              style="background-color: #ebf9fa; color: #39cbd6"
              size="small"
              >{{ row.planstatename }}</Button
            >
          </span>
          <span v-if="row.planstatename == '已关闭'">
            <Button
              class="task-tatus-0"
              style="
                background-color: rgb(248, 248, 248);
                color: rgb(134, 137, 142);
              "
              size="small"
              >已关闭</Button
            >
          </span>
        </template>
      </Table>
      <!-- <Page
        :total="total"
        show-sizer
        show-total
        style="text-align: right; margin-top: 20px"
        @on-change="pageChange"
        @on-page-size-change="pageSizeChange"
        :page-size-opts="pageSizeOptions"
        :current="pageIndex"
        :page-size="pageSize"
        transfer
      ></Page> -->
    </Card>
  </div>
</template>

<script>
import { drawSign } from "../../../util/drawSign";

export default {
  props: {
    typeIndex: {
      type: String,
    },
    payWayList: {
      type: Array,
    },
  },
  data() {
    
    const validatePremium = (rule, value, callback) => {
      if (value) {
        let reg = /^[0-9][0-9]*$/;
        let reg1 = /^(([0-9]{1}\d*)|(0{1}))(\.\d{1})$/;
        let reg2 = /^(([0-9]{1}\d*)|(0{1}))(\.\d{2})$/;
        if (reg.test(value)) {
          callback();
        } else if (reg1.test(value)) {
          callback();
        } else if (reg2.test(value)) {
          callback();
        } else {
          callback(new Error("请输入两位小数"));
        }
      } else {
        callback();
      }
      callback();
    };
    const validateMinDay = (rule, value, callback) => {
      const r = /^-?\d+$/;
      if (value && (!r.test(value) || value < -60 || value > 65)) {
        callback(new Error("只可录入“-60”到“65”之间的整数"));
      } else {
        if (
          this.superviseForm.endTime &&
          value &&
          Number(this.superviseForm.endTime) < Number(value)
        ) {
          callback(new Error("应交日开始天数需小于等于应交日结束天数"));
        } else {
          callback();
        }
      }
    };
    const validateMaxDay = (rule, value, callback) => {
      const r = /^-?\d+$/;
      if (value && (!r.test(value) || value < -60 || value > 65)) {
        callback(new Error("只可录入“-60”到“65”之间的整数"));
      } else {
        callback();
      }
    };
    return {
      isShow:false,
      topObj: {
        rospective: ["总任务数", "投诉客户", "大额单", "困难件", "生日客户"],
        yingjiaoqian: ["总任务数", "今日计划", "大额单", "困难件", "首次续期"],
        yingjiaoqi: [
          "总任务数",
          "当月未收",
          "宽一未收",
          "宽末未收",
          "即将失效",
          "首转失败",
          "客户不愿交费",
        ],
        shixiaojian: ["总任务数", "失效 10 天内", "3 个月内永久失效", "大额单"],
        shixiaojian: ["总任务数", "投诉客户", "续期客户", "困难件", "生日客户"],
        zzzz: ["总任务数", "今日计划"],
      },
      topArr: ["总任务数", "投诉客户", "大额单", "困难件", "生日客户"],

      fullaudiourl: "",
      showMore: false,
      waihuDia: false,
      waihuList: [
        {
          label: "语音机器人：",
          text: "您好。",
        },
        {
          label: "客户：",
          text: "是。",
        },
        {
          label: "语音机器人：",
          text: "诶~您好，我是医惠锡城的服务专员，工号2218，医惠锡城2024保障已经开启，您这边已经续保了吗?",
        },
        {
          label: "客户：",
          text: "好。",
        },
        {
          label: "客户：",
          text: "喂，你好。",
        },
        {
          label: "客户：",
          text: "续了",
        },
        {
          label: "语音机器人：",
          text: "嗯嗯好的，那后续保障查询、理赔咨询您可以直接添加我们微信咨询，我这边加您微信。",
        },
        {
          label: "客户：",
          text: "用户无应答。",
        },
        {
          label: "语音机器人：",
          text: "喂，您好，在吗?",
        },
        {
          label: "客户：",
          text: "在在在，好的可以加。",
        },
        {
          label: "语音机器人：",
          text: "嗯好的，那我稍后加您，您留意一下微信里的服务通知，通过一下，或者在短信里【点击链接】添加服务管家哈~那先不打扰您了，祝您生活愉快。",
        },
        // {
        //   label: "客户：",
        //   text: "最近手头资金周转困难，我大约4月份交上吧，可以吗？",
        // },
        // {
        //   label: "语音机器人：",
        //   text: "可以的，为您记录宽一交费，届时会通过服务人员再次提醒您。",
        // },
        // {
        //   label: "客户：",
        //   text: "好的，谢谢。",
        // },
      ],
      superviseForm: {
        taskRateStart:0,
        taskRateEnd:0,
        workStatus: "",
        workPlanRange: ["", ""],
        workEndRange: ["", ""],
        PayableRange: ["", ""],
        saleChannel: "",
        appntName: "",
        applyNo: "",
        payCount: "",
        pay: "",
        organization: "",
        salesName: "",
        payDifficult: "",
        minFee: "",
        maxFee: "",
        postaladdress: "",
        shouldPayRange: ["", ""],
        beginTime: null,
        endTime: null,
      },
      rules: {
        minFee: [{ validator: validatePremium, trigger: "blur" }],
        maxFee: [{ validator: validatePremium, trigger: "blur" }],
        beginTime: [{ validator: validateMinDay, trigger: "blur" }],
        endTime: [{ validator: validateMaxDay, trigger: "blur" }],
      },
      //本月交费完成
      monthPaid: "0",
      //工作状态下拉框
      workStatusList: [],
      //销售渠道下拉框
      saleChannelList: [],
      //年交
      payList: [],
      organizationList: [],
      value9: [0, 0],
      checkedCities: ['任务号', '管理机构', '服务人员', '渠道', '代理人', '保单号', '应交日期', '任务标签', '服务进度', '任务状态'],
      superviseColumns: [
        {
          title: "任务号",
          key: "taskid",
          align: "center",
        },
        {
          title: "管理机构",
          key: "institution",
          align: "center",
        },
        {
          title: "渠道",
          key: "branchtype",
          align: "center",
        },
        {
          title: "服务人员",
          key: "agentname",
          align: "center",
        },
        {
          title: "代理人",
          key: "appntname",
          align: "center",
        },
        {
          title: "保单号",
          key: "contno",
          align: "center",
        },
        {
          title: "应交日期",
          key: "paytodate",
          align: "center",
          sortable: true,
          sortable: "custom",
        },
        {
          title: "任务标签",
          align: "center",
          slot: "taskLabe",
          width: "190",
        },
        {
          title: "服务进度",
          key: "connected",
          align: "center",
          slot: "connected",
          width: "250",
        },
        {
          title: "任务状态",
          key: "planstatename",
          align: "center",
          slot: "planstatename",
        },

        //   {
        //     title: "操作",
        //     align: "center",
        //     width: "140",
        //     slot: "action",
        //     fixed: "right",
        //   },
      ],
      superviseData: [],
      cardmap: {
        面访正常单: 30,
        契撤保单: 30,
        问题保留保单: 30,
        超30天面访不成功: 30,
      },
      but: ["primary", "default", "default", "default", "default", "default"],
      // 对话框
      adjustPlan: false,
      adjustPlanForm: {
        adjustPlanDate: "",
        workType: "",
      },
      // 调整计划工作方式
      workTypeList: [],
      selection: [],
      selectLength: "0",
      // 分页显示
      total: "0",
      pageSizeOptions: [5, 10, 15, 20],
      pageIndex: 1,
      pageSize: 10,
      // 顶部显示
      success: 0,
      difficulty: 0,
      noplay: 0,
      sooninvalid: 0,
      overdue: 0,
      pageObj: "",
      queryLoading: false,
      adjustLoading: false,
      // 判断默认查询还是二次查询
      type: 0,
      typeFlag: 0,
      premorder: 0,
      paytodateorder: 0,
      // 给selecttag一个值(二次筛选)
      flagIndex: -1,
      historyObj: null,
      dialogVisible: false,
      dialogColumns: [
        {
          title: "因子名称",
          key: "a",
          width: "180",
          align: "center",
        },
        {
          title: "占比",
          key: "b",
          width: "120",
          align: "center",
        },
        {
          title: "分数",
          key: "c",
          width: "120",
          align: "center",
          slot: "score",
        },
        {
          title: "实际值",
          key: "d",
          width: "120",
          align: "center",
        },
      ],
      dialogData: [
        { a: "业务员过往继续率", b: "15%", c: "0", d: "0" },
        { a: "险种产品类别", b: "10%", c: "0", d: "疾病保险" },
        { a: "业务员出勒次数", b: "10%", c: "0", d: "33" },
        { a: "是否有过退保", b: "10%", c: "100", d: "否" },
        { a: "保单交费年限", b: "10%", c: "0", d: "30" },
        { a: "是否在职单类型", b: "5%", c: "100", d: "在职单" },
        { a: "是否重复白保件", b: "5%", c: "0", d: "是" },
        { a: "投保人年龄", b: "5%", c: "0", d: "25" },
        { a: "是否有附加险", b: "5%", c: "100", d: "是" },
        { a: "保单分红水平比", b: "2%", c: "0", d: "" },
        { a: "期交保费", b: "2%", c: "60", d: "7873.19" },
        { a: "出单时业务员司龄", b: "2%", c: "0", d: "3" },
        { a: "是否有过投诉记录", b: "2%", c: "100", d: "否" },
        { a: "是否聘才", b: "2%", c: "100", d: "否" },
        { a: "保单保额是否非整万", b: "2%", c: "100", d: "否" },
        { a: "保单现金价值率", b: "2%", c: "0", d: "" },
        { a: "是否有过理赔记录", b: "2%", c: "0", d: "否" },
        { a: "是否有两张及以上的保单", b: "2%", c: "100", d: "是" },
        { a: "是否发生过账号变更", b: "2%", c: "0", d: "否" },
        { a: "是否有过保单贷款", b: "2%", c: "0", d: "否" },
      ],
      taskLabelList: [
        {
          key: "1",
          value: "大额单",
        },
        {
          key: "2",
          value: "未签约",
        },
        {
          key: "3",
          value: "投诉史",
        },
        {
          key: "4",
          value: "失效史",
        },
        {
          key: "5",
          value: "拒赔史",
        },
      ],
      serviceMethodList: [
        {
          key: "6",
          value: "智能外呼",
        },
        {
          key: "7",
          value: "发送短信",
        },
        {
          key: "1",
          value: "电话联系客户",
        },
        {
          key: "2",
          value: "网络联系客户",
        },
        {
          key: "3",
          value: "面访客户",
        },
        {
          key: "4",
          value: "电话联系业务员",
        },
        {
          key: "5",
          value: "网络联系业务员",
        },
        {
          key: "6",
          value: "面访业务员",
        },
      ],
    };
  },
  methods: {
    downMP3() {
      // 创建一个新的a标签
      let link = document.createElement("a");

      // 设置a标签的href属性为文件的URL
      link.href = this.fullaudiourl;

      // 设置download属性以指定下载的文件名
      link.download = "通话a.wav";

      // 将a标签添加到文档中（可选）
      document.body.appendChild(link);

      // 模拟点击a标签以触发下载操作
      link.click();

      // 从文档中移除a标签（可选）
      document.body.removeChild(link);
    },
    showDialog() {
      this.dialogVisible = true;
    },
    dialogVisibleChange(val) {
      this.dialogVisible = val;
    },
    toConfig() {
      if (this.selectLength == 1) {
        this.$router.push({
          name: "ServicePlanConfig",
          query: {
            aaa: true,
          },
        });
      } else {
        this.$message({
          message: "请选择一条数据",
          type: "error",
        });
      }
    },
    //行样式
    rowClassName(row, index) {
      // if (index > 6) return "table-row-red1";
      // else return "";
      if (row.planstatename == "未服务") return "table-row-red1";
      else return "";
      // if (row.facerecordflag == "0" && row.planstatename != "已完成") {
      //   return "table-row-red1";
      // } else if (row.visitflag == "0" && row.planstatename != "已完成") {
      //   return "table-row-orange1";
      // }
      // return "";
    },

    // 应交日时间段
    changePayableRange(date) {
      // console.log(date)
      this.superviseForm.PayableRange = date;
    },
    //销售渠道
    changeSaleChannel(value) {
      this.superviseForm.organization = "";
      let bojType = "0" + value;
      this.api
        .getagentList({ branchtype: value ? bojType : "" })
        .then((res) => {
          if (res.code == 200 && res.data != null) {
            let arr = [];
            arr = res.data;
            arr.forEach((one) => {
              one.value = one.comcode;
              one.label = one.comcode + "-" + one.name;
              one.children = one.chilDren || [];
              if (one.children && one.children.length > 0) {
                one.chilDren.forEach((two) => {
                  two.value = two.comcode;
                  two.label = two.comcode + "-" + two.name;
                  two.children = two.chilDren || [];
                  if (two.children && two.children.length > 0) {
                    two.children.forEach((three) => {
                      three.value = three.comcode;
                      three.label = three.comcode + "-" + three.name;
                      three.children = three.chilDren || [];
                      if (three.children && three.children.length > 0) {
                        three.children.forEach((four) => {
                          four.value = four.comcode;
                          four.label = four.comcode + "-" + four.name;
                          four.children = four.chilDren || [];
                        });
                      }
                    });
                  }
                });
              }
            });
            console.log(arr);
            this.organizationList = arr;
          } else {
            this.organizationList = [];
          }
        });
    },
    // 工作计划时间段
    changeWorkPlanRange(date) {
      console.log(
        "superviseForm.actualServiceDateRange",
        date,
        this.superviseForm.actualServiceDateRange
      );
      this.superviseForm.workPlanRange = date;
    },

    // 工作完成时间段
    changeWorkEndRange(date) {
      // console.log(date)
      this.superviseForm.workEndRange = date;
    },

    // 工作录入时间段
    changeShouldPayRange(date) {
      // console.log(date)
      this.superviseForm.shouldPayRange = date;
    },

    // 初始化头部和下拉框
    initial() {
      let obj = {
        tasktype:'before',
        index: 1,
        initflag: 0,
        pageSize: 10,
        selecttag: 0, // 0是查全部
        selecttype: 0,
        premorder: 0,
        paytodateorder: 0,
      };
      this.api.getWorkListForSupervisor(obj).then((res) => {
        if (res.code == 200 && res.data != null) {
          this.cardmap=res.data.cardmap
          console.log(res.data.cardmap,666666666666)
          if (res.data.basemap.branchtypes.length > 0) {
            this.saleChannelList = res.data.basemap.branchtypes;
          }
          // if (res.data.basemap.ldcoms.length > 0) {
          //   this.organizationList = res.data.basemap.ldcoms;
          // }
          if (res.data.basemap.payintvs.length > 0) {
            this.payList = res.data.basemap.payintvs;
          }
          if (res.data.basemap.planstates.length > 0) {
            this.workStatusList = res.data.basemap.planstates;
          }
          res.data.workbar = {
            contnums_success: 0,
            plannums_Overdue: 171,
            contnums_noplay: 183,
            contnums_sooninvalid: 0,
            contnums_difficulty: 1,
          };
          if (res.data.workbar) {
            this.success = res.data.workbar.contnums_success;
            this.difficulty = res.data.workbar.contnums_difficulty;
            this.noplay = res.data.workbar.contnums_noplay;
            this.sooninvalid = res.data.workbar.contnums_sooninvalid;
            this.overdue = res.data.workbar.plannums_Overdue;
          }
          if (res.data.basemap.updateworktype) {
            this.workTypeList = res.data.basemap.updateworktype;
          }
        }
      });
      if (this.typeIndex) {
        this.clickButton(this.typeIndex);
      } else {
        this.handleSubmit(-1, 999);
      }
    },
    format(percentage) {
      return "";
    },
    wwww(){
        this.isShow=!this.isShow
        console.log(this.checkedCities,666)
    },
    wan(value){
    console.log(value,999)
    this.superviseForm.taskRateStart=value[0]
    this.superviseForm.taskRateEnd=value[1]
    },
    //表单---保单金额排序asc
    sortChange(column, key, order) {
      if (column.key == "paytodate") {
        this.premorder = 0;
        // 应交日
        if (column.order == "asc") {
          // 升序
          this.paytodateorder = 1;
        } else if (column.order == "desc") {
          // 降序
          this.paytodateorder = 2;
        } else {
          // 默认
          this.paytodateorder = 0;
        }
      }
      if (column.key == "paymoney") {
        this.paytodateorder = 0;
        // 应收保费
        if (column.order == "asc") {
          // 升序
          this.premorder = 1;
        } else if (column.order == "desc") {
          // 降序
          this.premorder = 2;
        } else {
          // 默认
          this.premorder = 0;
        }
      }

      this.handleSubmit(this.flagIndex, 999);
      // console.log(column, key, order);
    },

    // 重置表单
    handleReset() {
      this.$refs.superviseForm.resetFields();
      this.superviseForm = {
        workStatus: "",
        workPlanRange: ["", ""],
        workEndRange: ["", ""],
        PayableRange: ["", ""],
        saleChannel: "",
        appntName: "",
        applyNo: "",
        payCount: "",
        pay: "",
        organization: "",
        salesName: "",
        payDifficult: "",
        minFee: "",
        maxFee: "",
        postaladdress: "",
        shouldPayRange: ["", ""],
      };
    },

    //转时间
    timeFormat(time) {
      if (!time) {
        return "";
      }
      let d = new Date(time);
      var y = d.getFullYear();
      var m = d.getMonth() + 1;
      if (m < 10) {
        m = "0" + m;
      }
      var day = d.getDate();
      if (day < 10) {
        day = "0" + day;
      }
      return y + "-" + m + "-" + day;
    },

    // 查询
    handleSubmit(index, params) {
      this.$refs.superviseForm.validate((valid) => {
        if (valid) {
          if (this.historyObj == null) {
            if (index >= 0) {
              if (this.typeFlag == 0) {
                // console.log("----------默认查询：二次筛选---------["+this.flagIndex+']')
                this.type = 1;
              } else {
                // console.log("----------二次以上查询：二次筛选---------["+this.flagIndex+']')
                this.type = 1;
              }
            } else if (index == -1) {
              // console.log("----------默认查询---------")
              this.type = 1;
              this.typeFlag = 0;
              let arr = [
                "default",
                "default",
                "default",
                "default",
                "default",
                "default",
              ];
              arr[0] = "primary";
              this.but = arr;
              this.flagIndex = 0;
            } else {
              // console.log("---------二次以上查询----------")
              this.type = 1;
              this.typeFlag = 1;
              let arr = [
                "default",
                "default",
                "default",
                "default",
                "default",
                "default",
              ];
              arr[0] = "primary";
              this.but = arr;
              this.flagIndex = 0;
              this.queryLoading = true;
            }
            this.pageIndex = 1;
            this.pageSize = 10;
          }

          let obj = {
            tasktype:'before',
            planstate: this.superviseForm.workStatus
              ? this.superviseForm.workStatus
              : null,
            rangeminappointeddate: this.superviseForm.workPlanRange[0]
              ? this.timeFormat(this.superviseForm.workPlanRange[0])
              : null,
            rangemaxappointeddate: this.superviseForm.workPlanRange[1]
              ? this.timeFormat(this.superviseForm.workPlanRange[1])
              : null,
            rangeminfishdate: this.superviseForm.workEndRange[0]
              ? this.timeFormat(this.superviseForm.workEndRange[0])
              : null,
            rangemaxfishdate: this.superviseForm.workEndRange[1]
              ? this.timeFormat(this.superviseForm.workEndRange[1])
              : null,
            rangeminpaytodate: this.superviseForm.PayableRange[0]
              ? this.timeFormat(this.superviseForm.PayableRange[0])
              : null,
            rangemaxpaytodate: this.superviseForm.PayableRange[1]
              ? this.timeFormat(this.superviseForm.PayableRange[1])
              : null,
            rangeminControllerDate: this.superviseForm.shouldPayRange[0]
              ? this.timeFormat(this.superviseForm.shouldPayRange[0])
              : null,
            rangemaxControllerDate: this.superviseForm.shouldPayRange[1]
              ? this.timeFormat(this.superviseForm.shouldPayRange[1])
              : null,
            branchtype: this.superviseForm.saleChannel
              ? this.superviseForm.saleChannel
              : null,
            appntname: this.superviseForm.appntName
              ? this.superviseForm.appntName
              : null,
            contno: this.superviseForm.applyNo
              ? this.superviseForm.applyNo
              : null,
            payyear: this.superviseForm.payCount
              ? this.superviseForm.payCount
              : null,
            payintv: this.superviseForm.pay ? this.superviseForm.pay : null,
            agentcom: this.superviseForm.organization
              ? this.superviseForm.organization[
                  this.superviseForm.organization.length - 1
                ]
              : null,
            agentname: this.superviseForm.salesName
              ? this.superviseForm.salesName
              : null,
            difficulty: this.superviseForm.payDifficult
              ? this.superviseForm.payDifficult - 1
              : null,
            rangeminprem: this.superviseForm.minFee
              ? this.superviseForm.minFee
              : null,
            rangemaxprem: this.superviseForm.maxFee
              ? this.superviseForm.maxFee
              : null,
            index: this.pageIndex,
            initflag: 1,
            pageSize: this.pageSize,
            selecttag: this.flagIndex, // 0是查全部
            selecttype: 0, // 督导
            postaladdress: this.superviseForm.postaladdress
              ? this.superviseForm.postaladdress
              : null,
            initqueryflag: params == 999 ? 0 : null,
            type: 1,
            premorder: this.premorder,
            paytodateorder: this.paytodateorder,
          };
          this.superviseForm.endTime &&
            (obj.endTime = this.superviseForm.endTime);
          this.superviseForm.beginTime &&
            (obj.beginTime = this.superviseForm.beginTime);
          this.pageObj = obj;
          this.api.getWorkListForSupervisor(obj).then((res) => {
            // res.data = {
            //   workbar: null,
            //   basemap: null,
            //   ipage: {
            //     records: [
            //       {
            //         planid: "1673197308978761729",
            //         contno: "0000329823501555",
            //         appntid: "0001056012",
            //         appntname: "张兴发",
            //         paytodate: "2023-07-14 00:00:00",
            //         payyear: 2,
            //         payyears: 120,
            //         payintv: "1",
            //         payintvname: "月交",
            //         difficulty: "7",
            //         paymoney: 2000,
            //         restdays: 9994,
            //         appointeddate: "2023-07-17 00:00:00",
            //         worktype: "0",
            //         worktypename: "短信联系业务员",
            //         agentcode: "DL002849",
            //         agentname: "测试四",
            //         planstate: "1",
            //         planstatename: "服务中",
            //         workid: "1680862563347230721",
            //         visitflag: "1",
            //         facerecordflag: "1",
            //       },
            //       {
            //         planid: "1602238857775951874",
            //         contno: "0001103317741888",
            //         appntid: "0000350744",
            //         appntname: "王EU",
            //         paytodate: "2020-03-01 00:00:00",
            //         payyear: 4,
            //         payyears: 5,
            //         payintv: "12",
            //         payintvname: "年交",
            //         difficulty: "0",
            //         paymoney: 100000,
            //         restdays: -1215,
            //         appointeddate: "2022-12-13 00:00:00",
            //         worktype: "1",
            //         worktypename: "电话联系业务员",
            //         agentcode: "61001450",
            //         agentname: "邱nj",
            //         planstate: "0",
            //         planstatename: "未服务",
            //         workid: "1602238857834672129",
            //         visitflag: "0",
            //         facerecordflag: "0",
            //       },
            //       {
            //         planid: "1602902892884385794",
            //         contno: "0004975421601888",
            //         appntid: "0000891852",
            //         appntname: "张普",
            //         paytodate: "2024-10-23 00:00:00",
            //         payyear: 3,
            //         payyears: 3,
            //         payintv: "12",
            //         payintvname: "年交",
            //         difficulty: "0",
            //         paymoney: 10000,
            //         restdays: -249,
            //         appointeddate: "2022-12-22 00:00:00",
            //         worktype: "1",
            //         worktypename: "电话联系业务员",
            //         agentcode: "61004177",
            //         agentname: "赵嘉浩",
            //         planstate: "0",
            //         planstatename: "服务中",
            //         workid: "1602902892913745922",
            //         visitflag: "0",
            //         facerecordflag: "0",
            //       },
            //       {
            //         planid: "1606116251196817409",
            //         contno: "0004978521711888",
            //         appntid: "0000892675",
            //         appntname: "张改改",
            //         paytodate: "2022-10-27 00:00:00",
            //         payyear: 2,
            //         payyears: 5,
            //         payintv: "12",
            //         payintvname: "年交",
            //         difficulty: "0",
            //         paymoney: 100000,
            //         restdays: -245,
            //         appointeddate: "2022-12-23 00:00:00",
            //         worktype: "1",
            //         worktypename: "电话联系业务员",
            //         agentcode: "61004177",
            //         agentname: "赵嘉浩",
            //         planstate: "0",
            //         planstatename: "服务中",
            //         workid: "1606116251217788930",
            //         visitflag: "0",
            //         facerecordflag: "0",
            //       },
            //       {
            //         planid: "1621062191099768834",
            //         contno: "0000532721051998",
            //         appntid: "0000894693",
            //         appntname: "飞虎分",
            //         paytodate: "2022-12-07 00:00:00",
            //         payyear: 2,
            //         payyears: 10,
            //         payintv: "12",
            //         payintvname: "年交",
            //         difficulty: "0",
            //         paymoney: 10000,
            //         restdays: -204,
            //         appointeddate: "2023-02-02 00:00:00",
            //         worktype: "2",
            //         worktypename: "网络联系业务员",
            //         agentcode: "DL002089",
            //         agentname: "陈飞",
            //         planstate: "0",
            //         planstatename: "服务中",
            //         workid: "1621062191192043522",
            //         visitflag: "0",
            //         facerecordflag: "0",
            //       },
            //       {
            //         planid: "1621053278652547073",
            //         contno: "0000150722361555",
            //         appntid: "0000953830",
            //         appntname: "用户数据",
            //         paytodate: "2022-08-11 00:00:00",
            //         payyear: 2,
            //         payyears: 3,
            //         payintv: "12",
            //         payintvname: "年交",
            //         difficulty: "0",
            //         paymoney: 2000,
            //         restdays: -322,
            //         appointeddate: "2023-02-02 00:00:00",
            //         worktype: "2",
            //         worktypename: "网络联系业务员",
            //         agentcode: "DL002089",
            //         agentname: "陈飞",
            //         planstate: "0",
            //         planstatename: "服务中",
            //         workid: "1621053278698684418",
            //         visitflag: "0",
            //         facerecordflag: "0",
            //       },
            //       {
            //         planid: "1623303495858892802",
            //         contno: "0001114717551888",
            //         appntid: "0000351122",
            //         appntname: "郑1Z",
            //         paytodate: "2020-03-02 00:00:00",
            //         payyear: 4,
            //         payyears: 5,
            //         payintv: "12",
            //         payintvname: "年交",
            //         difficulty: "0",
            //         paymoney: 500000,
            //         restdays: -1214,
            //         appointeddate: "2023-02-08 00:00:00",
            //         worktype: "0",
            //         worktypename: "短信联系业务员",
            //         agentcode: "61001450",
            //         agentname: "邱nj",
            //         planstate: "0",
            //         planstatename: "未服务",
            //         workid: "1623303495909224450",
            //         visitflag: "0",
            //         facerecordflag: "0",
            //       },
            //       {
            //         planid: "1623201981240713218",
            //         contno: "0000566121691818",
            //         appntid: "0000859865",
            //         appntname: "朱小栋",
            //         paytodate: "2022-12-10 00:00:00",
            //         payyear: 2,
            //         payyears: 3,
            //         payintv: "12",
            //         payintvname: "年交",
            //         difficulty: "0",
            //         paymoney: 20000,
            //         restdays: -201,
            //         appointeddate: "2023-02-08 00:00:00",
            //         worktype: "0",
            //         worktypename: "短信联系业务员",
            //         agentcode: "8601010114",
            //         agentname: "赵天天",
            //         planstate: "0",
            //         planstatename: "未服务",
            //         workid: "1623201981261684738",
            //         visitflag: "0",
            //         facerecordflag: "0",
            //       },
            //       {
            //         planid: "1623201981148438530",
            //         contno: "0001965121481813",
            //         appntid: "0000894905",
            //         appntname: "马武",
            //         paytodate: "2022-12-09 00:00:00",
            //         payyear: 2,
            //         payyears: 15,
            //         payintv: "12",
            //         payintvname: "年交",
            //         difficulty: "0",
            //         paymoney: 4943,
            //         restdays: -202,
            //         appointeddate: "2023-02-08 00:00:00",
            //         worktype: "0",
            //         worktypename: "短信联系业务员",
            //         agentcode: "8601010114",
            //         agentname: "赵天天",
            //         planstate: "0",
            //         planstatename: "未服务",
            //         workid: "1623201981177798659",
            //         visitflag: "0",
            //         facerecordflag: "0",
            //       },
            //       {
            //         planid: "1623201981127467010",
            //         contno: "0001964721811813",
            //         appntid: "0000894825",
            //         appntname: "吴洛",
            //         paytodate: "2022-12-09 00:00:00",
            //         payyear: 2,
            //         payyears: 20,
            //         payintv: "12",
            //         payintvname: "年交",
            //         difficulty: "0",
            //         paymoney: 3980.5,
            //         restdays: -202,
            //         appointeddate: "2023-02-08 00:00:00",
            //         worktype: "0",
            //         worktypename: "短信联系业务员",
            //         agentcode: "8601010114",
            //         agentname: "赵天天",
            //         planstate: "0",
            //         planstatename: "未服务",
            //         workid: "1623201981148438529",
            //         visitflag: "0",
            //         facerecordflag: "0",
            //       },
            //     ],
            //     total: "10",
            //     size: "10",
            //     current: "1",
            //     orders: [],
            //     searchCount: true,
            //     pages: "1",
            //   },
            // };
            if (res.code == 200 && res.data != null) {
              this.queryLoading = false;
              this.historyObj = null;
              if (res.data.ipage && res.data.ipage.total > 0) {
                this.total = res.data.ipage.total;
                this.superviseData = res.data.ipage.records;
                this.cardmap=res.data.cardmap
                if (params != 999) {
                  this.$Message.info("查询成功");
                }
                this.superviseData.forEach((element) => {
                  if (element.paytodate) {
                    element.paytodate = element.paytodate.substr(0, 10);
                  }
                  if (
                    element.payyear &&
                    element.payyears &&
                    element.payintvname
                  ) {
                    element.payyear =
                      element.payyear +
                      "/" +
                      element.payyears +
                      element.payintvname;
                  }
                  if (element.appointeddate) {
                    element.plandatetype = element.appointeddate.substr(0, 10);
                  }
                  if (element.agentname && element.agentcode) {
                    element.agent = element.agentname + "-" + element.agentcode;
                  }
                });
              } else {
                this.total = 0;
                this.superviseData = [];
                if (params != 999) {
                  this.$Message.info("查询数据为空");
                }
              }
            } else {
              this.queryLoading = false;
              this.total = 0;
              this.superviseData = [];
              if (params != 999) {
                this.$Message.info(res.msg);
              }
            }
          });
        } else {
          this.$Message.error("信息填写有误");
        }
      });
    },

    // 分页查询
    pageSubmit() {
      this.pageObj.index = this.pageIndex;
      this.pageObj.pageSize = this.pageSize;
      this.api.getWorkListForSupervisor(this.pageObj).then((res) => {
        if (res.code == 200 && res.data != null) {
          if (res.data.ipage && res.data.ipage.total > 0) {
            this.total = res.data.ipage.total;
            this.superviseData = res.data.ipage.records;
            this.cardmap=res.data.cardmap
            this.superviseData.forEach((element) => {
              if (element.paytodate) {
                element.paytodate = element.paytodate.substr(0, 10);
              }
              if (element.payyear && element.payyears && element.payintvname) {
                element.payyear =
                  element.payyear +
                  "/" +
                  element.payyears +
                  element.payintvname;
              }
              if (element.appointeddate) {
                element.plandatetype = element.appointeddate.substr(0, 10);
              }
              if (element.agentname && element.agentcode) {
                element.agent = element.agentname + "-" + element.agentcode;
              }
            });
          } else {
            this.total = 0;
            this.superviseData = [];
            this.$Message.info("查询数据为空");
          }
        } else {
          this.total = 0;
          this.superviseData = [];
          this.$Message.info(res.msg);
        }
      });
    },

    //点击按钮变绿，其他default
    clickButton(index) {
      this.flagIndex = index;
      let arr = [
        "default",
        "default",
        "default",
        "default",
        "default",
        "default",
      ];
      arr[index] = "primary";
      this.but = arr;
      this.handleSubmit(index, 999);
    },

    // 点击显示对话框
    adjust() {
      if (this.selectLength <= 0) {
        this.$Message.error("未选择计划，不可进行此操作");
        return;
      }
      let i = 0;
      this.selection.some(function (element) {
        if (element.planstatename == "已完成") {
          return true;
        } else {
          i++;
        }
      });
      if (i === this.selection.length) {
        this.adjustPlan = true;
      } else {
        this.$Message.info("计划中不能包含已完成的计划");
      }
    },

    // 计划提交
    adjustSubmit() {
      this.adjustLoading = true;
      let index = 0;
      this.selection.forEach((element) => {
        let obj = {
          appointeddate: util.dateToISOString(
            this.adjustPlanForm.adjustPlanDate
          ),
          worktype: this.adjustPlanForm.workType,
          planid: element.planid,
        };
        this.api.updateplan(obj).then((res) => {
          if (res.code == 200 && res.data != null) {
            index++;
            if (index == this.selection.length) {
              this.adjustLoading = false;
              this.$Message.success(res.msg);
              this.adjustPlanForm = {
                adjustPlanDate: "",
                workType: "",
              };
              this.handleSubmit(0, 999);
            }
          } else {
            index++;
            this.$Message.info(res.msg);
            if (index == this.selection.length) {
              this.adjustLoading = false;
              this.adjustPlanForm = {
                adjustPlanDate: "",
                workType: "",
              };
              this.handleSubmit(0, 999);
            }
          }
        });
      });
    },

    // 点击关闭隐藏对话框
    modalVisibleChange(whether) {
      if (whether == false) {
        this.adjustPlan = false;
        this.adjustPlanForm = {
          adjustPlanDate: "",
          workType: "",
        };
      }
    },

    // 表格多选获取数据
    selectionChange(selection) {
      this.selection = selection;
      this.selectLength = selection.length;
    },

    // 批量处理跳转
    batchDeal() {
      this.selection = [
        {
          planid: "1646324482682511362",
          contno: "0004531116141888",
          appntid: "0000875688",
          appntname: "江菲",
          paytodate: "2018-03-13",
          payyear: "3/15年交",
          payyears: 15,
          payintv: "12",
          payintvname: "年交",
          difficulty: "0",
          paymoney: 23800,
          restdays: -1919,
          appointeddate: "2023-04-13 00:00:00",
          worktype: "0",
          worktypename: "短信联系业务员",
          agentcode: "61003475",
          agentname: "陈琳",
          planstate: "0",
          planstatename: "未服务",
          workid: "1646324482711871489",
          visitflag: "0",
          facerecordflag: "0",
          plandatetype: "2023-04-13",
          agent: "陈琳-61003475",
        },
      ];
      this.selectLength = 1;
      if (this.selectLength <= 0) {
        this.$Message.error("未选择计划，不可进行此操作");
        return;
      }
      let i = 0;
      sessionStorage.setItem("QUERYOBJ", JSON.stringify(this.pageObj));
      sessionStorage.setItem("QUERYFORM", JSON.stringify(this.superviseForm));
      sessionStorage.setItem("INSURANCE_TYPE", "督导件");
      this.selection.some(function (element) {
        if (element.planstatename == "已完成") {
          return true;
        } else {
          i++;
        }
      });
      if (i === this.selection.length) {
        let selectionCopy = [];
        let j = 0;
        this.selection.forEach((element) => {
          if (selectionCopy.includes(element.appntid)) {
            j++;
          } else {
            selectionCopy.push(element.appntid);
          }
        });
        if (j === this.selection.length - 1) {
          this.$router.push({
            // name: "batchDeal",
            path: "batchDeal",
            query: {
              selection: this.selection,
              insuranceType: "supervise",
            },
          });
        } else {
          this.$Message.info("批量处理中投保人编号必须相同");
        }
      } else {
        this.$Message.info("计划中不能包含已完成的计划");
      }
    },

    // 工作状态跳转
    forward(row) {
      this.$router.push({
        name: "PlannedTaskDetail",
        query: { id: row.id },
      });
      return;
      sessionStorage.setItem("QUERYOBJ", JSON.stringify(this.pageObj));
      sessionStorage.setItem("QUERYFORM", JSON.stringify(this.superviseForm));
      sessionStorage.setItem("INSURANCE_TYPE", "督导件");
      if (row.planstatename == "已完成") {
        this.$router.push({
          name: "ServiceDetail",
          query: {
            row: row,
            insuranceType: "supervise",
          },
        });
      } else {
        this.$router.push({
          name: "ServiceDetail",
          query: {
            selection: row,
            insuranceType: "supervise",
          },
        });
      }
    },

    // 分页设置
    pageChange(pageIndex) {
      this.pageIndex = pageIndex;
      this.pageSubmit();
    },
    pageSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.pageSubmit();
    },

    // 转化为两位小数
    decimalConversion(value) {
      let reg = /^[0-9][0-9]*$/;
      let reg1 = /^(([0-9]{1}\d*)|(0{1}))(\.\d{1})$/;
      let reg2 = /^(([0-9]{1}\d*)|(0{1}))(\.\d{2})$/;
      if (value) {
        if (reg.test(value)) {
          this.superviseForm.minFee = value + ".00";
        } else if (reg1.test(value)) {
          this.superviseForm.minFee = value + "0";
        } else if (reg2.test(value)) {
        } else {
          this.$refs.superviseForm.validateField("minFee");
        }
      } else {
        this.superviseForm.minFee = null;
      }
    },

    decimalConversion2(value) {
      let reg = /^[0-9][0-9]*$/;
      let reg1 = /^(([0-9]{1}\d*)|(0{1}))(\.\d{1})$/;
      let reg2 = /^(([0-9]{1}\d*)|(0{1}))(\.\d{2})$/;
      if (value) {
        if (reg.test(value)) {
          this.superviseForm.maxFee = value + ".00";
        } else if (reg1.test(value)) {
          this.superviseForm.maxFee = value + "0";
        } else if (reg2.test(value)) {
        } else {
          this.$refs.superviseForm.validateField("maxFee");
        }
      } else {
        this.superviseForm.maxFee = null;
      }
    },
    draw(ele, loginUser, loginTime) {
      let imageUrl = drawSign(ele, loginUser, loginTime);
      document.getElementsByClassName(
        "ivu-table-fixed-body"
      )[0].style.background = "url(" + imageUrl + ") left top repeat";
      document
        .getElementsByClassName("ivu-table-fixed-body")[0]
        .classList.add("add-background");

      document.getElementsByClassName(
        "ivu-table-fixed-body"
      )[1].style.background = "url(" + imageUrl + ") left top repeat";
      document
        .getElementsByClassName("ivu-table-fixed-body")[1]
        .classList.add("add-background");

      document.getElementsByClassName("ivu-table-body")[0].style.background =
        "url(" + imageUrl + ") left top repeat";
      document
        .getElementsByClassName("ivu-table-body")[0]
        .classList.add("add-background");
    },
    getOrganization() {
      this.api.remanagecomList().then((res) => {
        if (res.code == 200 && res.data != null) {
          let arr = [];
          arr.push(res.data);
          arr.forEach((one) => {
            one.value = one.comcode;
            one.label = one.comcode + "-" + one.name;
            one.children = one.chilDren || [];
            if (one.children) {
              one.chilDren.forEach((two) => {
                two.value = two.comcode;
                two.label = two.comcode + "-" + two.name;
                two.children = two.chilDren || [];
                if (two.children) {
                  two.children.forEach((three) => {
                    three.value = three.comcode;
                    three.label = three.comcode + "-" + three.name;
                    three.children = three.chilDren || [];
                    if (three.children) {
                      three.children.forEach((four) => {
                        four.value = four.comcode;
                        four.label = four.comcode + "-" + four.name;
                        four.children = four.chilDren || [];
                      });
                    }
                  });
                }
              });
            }
          });
          console.log(arr);
          this.organizationList = arr;
        } else {
          this.organizationList = [];
        }
      });
    },
  },
  created() {
    if (sessionStorage.getItem("INSURANCE_TYPE") == "督导件") {
      if (sessionStorage.getItem("QUERYOBJ")) {
        // 二次筛选条件
        this.historyObj = JSON.parse(sessionStorage.getItem("QUERYOBJ"));
        this.type = this.historyObj.type;
        this.typeFlag = this.historyObj.type;
        this.flagIndex = this.historyObj.selecttag;
        this.premorder = this.historyObj.premorder;
        this.paytodateorder = this.historyObj.paytodateorder;
        let arr = [
          "default",
          "default",
          "default",
          "default",
          "default",
          "default",
        ];
        arr[this.flagIndex] = "primary";
        this.but = arr;
        this.pageIndex = this.historyObj.index;
        this.pageSize = this.historyObj.pageSize;

        // 单次查询条件
        this.superviseForm = JSON.parse(sessionStorage.getItem("QUERYFORM"));

        // 工作录入时间段
        this.superviseForm.shouldPayRange[0] =
          this.historyObj.rangeminControllerDate;
        this.superviseForm.shouldPayRange[1] =
          this.historyObj.rangemaxControllerDate;
        // 工作计划时间段
        this.superviseForm.workPlanRange[0] =
          this.historyObj.rangeminappointeddate;
        this.superviseForm.workPlanRange[1] =
          this.historyObj.rangemaxappointeddate;
        // 工作完成时间段
        this.superviseForm.workEndRange[0] = this.historyObj.rangeminfishdate;
        this.superviseForm.workEndRange[1] = this.historyObj.rangemaxfishdate;
        // 应交日时间段
        this.superviseForm.PayableRange[0] = this.historyObj.rangeminpaytodate;
        this.superviseForm.PayableRange[1] = this.historyObj.rangemaxpaytodate;
        // console.log(this.historyObj, this.superviseForm);
        // console.log('工作录入时间段:' + this.superviseForm.shouldPayRange);
        // console.log('工作计划时间段:' + this.superviseForm.workPlanRange);
        // console.log('工作完成时间段:' + this.superviseForm.workEndRange);
        // console.log('应交日时间段:' + this.superviseForm.PayableRange);
        this.changeSaleChannel(this.historyObj.branchtype);
        sessionStorage.removeItem("QUERYOBJ");
        sessionStorage.removeItem("QUERYFORM");
        // sessionStorage.removeItem("INSURANCE_TYPE");
      }
    }
  },
  mounted() {
    /**
     * rospective
     * yingjiaoqian
     * yingjiaoqis
     * shixiaojian
     * shouci
     * jiaoban
     */
    // console.log("this.$route", this.$route);
    // if (this.$route.path.includes("yingjiaoqian")) {
    //   this.superviseColumns.splice(2, 0, {
    //     title: "客户生日",
    //     key: "restdays",
    //     align: "center",
    //     width: "150",
    //   });
    // }
    Object.keys(this.topObj).forEach((key) => {
      if (this.$route.path.includes(key)) this.topArr = this.topObj[key];
    });
    this.getOrganization();
    // console.log(sessionStorage.getItem("QUERYOBJ"));
    if (JSON.parse(sessionStorage.getItem("QUERYOBJ"))) {
      let queryObj = JSON.parse(sessionStorage.getItem("QUERYOBJ"));
    }
    this.changeSaleChannel(this.superviseForm.saleChannel);

    // console.log(sessionStorage.getItem("QUERYOBJ"));

    this.initial();

    let loginUser = sessionStorage.getItem("name");
    let loginTime =
      new Date().getFullYear() +
      "/" +
      (new Date().getMonth() + 1) +
      "/" +
      new Date().getDate();
    // this.draw(this.$refs.myCanvas, loginUser, loginTime)
  },
  beforeDestroy() {
    this.superviseData = [];
    this.superviseForm = null;
    this.rules = null;
    this.monthPaid = null;
    this.workStatusList = null;
    this.saleChannelList = null;
    this.payList = null;
    this.organizationList = null;
    this.superviseColumns = null;
    this.superviseData = null;
    this.but = null;
    this.workTypeList = null;
    this.selection = null;
    this.selectLength = null;
    this.total = null;
    this.pageSizeOptions = null;
    this.pageIndex = null;
    this.pageSize = null;
    this.success = null;
    this.difficulty = null;
    this.noplay = null;
    this.sooninvalid = null;
    this.overdue = null;
    this.pageObj = null;
    this.queryLoading = null;
    this.adjustLoading = null;
    this.type = null;
    this.typeFlag = null;
    this.premorder = null;
    this.paytodateorder = null;
    this.flagIndex = null;
    this.historyObj = null;
  },
};
</script>
<style lang="less">
@import "./index.less";

.ivu-table .table-row-red1 td {
  background: rgb(255, 247, 247) !important;
}

.ivu-modal-header {
  background-color: #2d8cf0;
}

.ivu-modal-close .ivu-icon-ios-close {
  color: #fff !important;
}
</style>
<style lang="less" scoped>
.form-row0 {
  /deep/ .ivu-row {
    justify-content: space-between !important;
  }
}
.titleBox {
      display: flex;
      padding: 4px 14px 0 14px;

      .title-r {
        font-weight: 500;
        font-size: 16px;
        color: #3d7cff;
        position: relative;

        &::before {
          position: absolute;
          top: 50%;
          left: -12px;
          transform: translateY(-50%);
          content: "";
          width: 5px;
          height: 15px;
          background-color: #3d7cff;
        }
      }

      .textNew {
        font-weight: normal;
        font-size: 12px;
        color: #f9725c;
        line-height: 22px;
        text-align: left;
        background-color: #fff;
        margin-left: 8px;
      }
    }
.dialog-fromBtn {
  display: flex;
  justify-content: center;
  padding: 16px 32px 0 0;
}
.botton-btns {
  position: absolute;
  bottom: 30px;
  right: 40px;
}
.dialog-form0 {
  /deep/ .el-form-item__label {
    color: rgb(80, 80, 80);
    font-size: 16px;
    font-weight: 700;
  }
}
.checkbox-group-0 {
  display: flex;
  justify-content: space-between;
  /deep/ .ivu-checkbox-wrapper {
    margin-right: 0;
    font-size: 10px;
  }
}
.btn-more-box {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 58px;
  color: rgb(66, 101, 237);
  .btn-more {
    background: #ffffff;
    border-radius: 4px;
    border: 1px solid #3d7cff;
    padding: 7px ;
    font-size: 14px;
    color: #3d7cff;
  }
  .liebiao{
    position: absolute;
    width: 145px;
    border: 1px solid #ccc;
    background: #fff;
    padding: 15px;
    z-index: 999;
    top: 92%;
    right: 5%;
  }
}
.task-labe0 {
  display: flex;
  button {
    width: 51px;
    height: 21px;
    border-radius: 16px;
    font-size: 12px;
    background: rgb(252, 242, 229);
    color: rgb(225, 114, 57);
    line-height: 21px;
    text-align: center;
    border: none;
  }
  .tousushi {
    color: rgb(66, 101, 237);
    background: rgb(226, 232, 255);
  }
  button + button {
    margin-left: 10px;
  }
}
.task-tatus-0 {
  border-radius: 12px;
  font-size: 12px;
  width: 57px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  border: none !important;
}
.col-202 {
  /* 矩形 */
  width: 219px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-around;

  background: #ffffff;
  box-shadow: 0px 2px 10px 0px rgba(185, 185, 185, 0.5);
  border-radius: 4px;
  margin-right: 20px;
}
.info {
  font-weight: 500;
  font-size: 14px;
  color: #293f66;
}
.infoNum {
  font-weight: normal;
  font-size: 16px;
  color: #293f66;
}
.table-btn-box {
  display: flex;
  margin-bottom: 20px;
  .right-btns {
    flex: 1;
    text-align: start;
    button + button {
      border-left: 1px solid rgb(234, 234, 234);
    }
  }
}
.contentP {
  margin-bottom: 10px;
  font-size: 14px;
  color: #9aa5b8;
}
::v-deep .el-input-group__append {
  padding: 0 10px;
}
::v-deep .el-progress-bar {
  padding-right: 0;
  margin-right: 0;
}

::v-deep .el-progress.is-success .el-progress__text {
  display: none;
}
::v-deep .el-progress__text {
  display: none;
}
.progressBox {
  ::v-deep .el-progress {
    .el-progress-bar {
      padding-right: 0;
      .el-progress-bar__inner {
        background: #9a73ff;
      }
    }
  }
}
::v-deep .el-tooltip__popper {
  background: #ffffff;
  box-shadow: 0px 2px 10px 0px rgba(185, 185, 185, 0.5);
  border-radius: 4px;
  border: none !important;
}
::v-deep .el-form-item {
    padding: 8px;
}
</style>
